
<template>
  <div class="echars-cell">
    <div class="zhexian">
    <h2>vue中插入Echarts示例</h2>
    <div id="chart_example">
    </div>
    </div>

    <div id="main"
      style="width: 600px;height:400px;"></div>
       <div id="visitorpie" class="" style="width: 90%;height:450px;"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
    // 引入柱状图
    import 'echarts/lib/chart/pie';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
export default {
  data () {
    return {
     pieData: {'beijing': 9275,
      'hangzhou': 2550,
      'qita': 39762,
      'shanghai': 4389,
      'shenzhen': 4702}
    }
  },
  mounted () {
    this.myEcharts();
     this.mychart();
      this.circleChart()
  },
  methods: {
    myEcharts () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    mychart () {
      let myChart = echarts.init(document.getElementById('chart_example'));
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      myChart.setOption(option);

      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function () { myChart.resize() });
    },
    circleChart(){
       let circleChart = echarts.init(document.getElementById('visitorpie'));
                      const option = {
                    title : {
                        text: '用户分布',
                        subtext: '',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['北京','上海','深圳','杭州','其他']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:this.pieData.beijing, name:'北京'},
                                {value:this.pieData.shanghai, name:'上海'},
                                {value:this.pieData.shenzhen, name:'深圳'},
                                {value:this.pieData.hangzhou, name:'杭州'},
                                {value:this.pieData.qita, name:'其他'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                circleChart.setOption(option);
    }
  },
  watch: {},
  created () {

  }
}
</script>
<style scoped>
.zhexian{
  width: 50%;
}
#chart_example {
  width: 50%;
  height: 300px;
  border: 1px solid red;
  margin: 0 auto;
}
</style>
 